<template>
  <div class="activity">
    <div class="box">
      <div class="left">
        <div class="title active" @click="page.to('/pages-sub/activity/list')">
          <span>活动小喇叭</span>
          <image src="./images/right.png" />
        </div>
        <div class="list">
          <swiper class="swiper" circular :current="current" @change="currentChange">
            <swiper-item v-for="(item, index) in activityList" :key="index">
              <div
                class="content"
                :style="{
                  background: `rgba(224, 224, 224, 1) url(${item.imgUrls}) center center no-repeat`,
                  backgroundSize: 'cover',
                }"
                @click="page.to(`/pages-sub/activity/detail?id=${item.id}`)"
              >
                <div class="title">{{ item.title }}</div>
                <div class="date">{{ item.startTime }} - {{ item.endTime }}</div>
              </div>
            </swiper-item>
          </swiper>
          <div class="indicator" v-if="activityList.length > 1">
            <span>{{ current + 1 }}</span>
            <span class="total">/{{ activityList.length }}</span>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="item active" @click="page.to('/pages-sub/system/portrait')">
          <div class="info">
            <div class="title">平台自画像</div>
            <div class="tips">我们是谁？</div>
            <div class="tips">我们想做什么？</div>
          </div>
          <image src="./images/zhx.png" />
        </div>
        <div class="item active" @click="page.to('/pages-sub/artist/list')">
          <div class="info">
            <div class="title">走近艺术家</div>
            <div class="tips">在这里邂逅</div>
            <div class="tips">独立艺术家</div>
          </div>
          <image src="./images/ysj.png" />
        </div>
      </div>
    </div>

    <div class="boss" v-if="bossList.length > 0">
      <div class="title">艺术家民宿店主</div>
      <scroll-view class="scroll" scroll-x :show-scrollbar="false">
        <div class="list" :style="{ width: bossList.length * 240 - 28 + 'rpx' }">
          <div class="item" v-for="(item, index) in bossList" :key="index">
            <image class="img" :src="item.avatar" mode="aspectFill" />
            <div class="name">{{ item.artName }}</div>
            <div class="type">{{ item.major }}</div>
            <div class="button active" @click="page.to(`/pages-sub/artist/index?id=${item.id}`)">
              查看
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import page from '@/utils/page'
defineOptions({
  name: 'Activity',
})

const activityList = ref([])
const current = ref(0)
function currentChange({ detail }) {
  current.value = detail.current
}

http.get('/activity-app/open/page', {}).then((res: any) => {
  activityList.value = res.records.map((item) => {
    item.imgUrls = item.imgUrls.split(',')[0]
    item.startTime = dayjs(item.startTime).format('MM月DD日')
    item.endTime = dayjs(item.endTime).format('MM月DD日')
    return item
  })
})

const bossList = ref([])
http.get('/artist-authorized-app/open/hotList', {}).then((res: any) => {
  bossList.value = res || []
})
</script>
<style lang="scss" scoped>
.activity {
  margin-top: 58rpx;
  .box {
    display: flex;
    justify-content: space-between;
    height: 342rpx;
    padding: 0 30rpx;
    .left,
    .right > .item {
      box-sizing: border-box;
      overflow: hidden;
      background: #ffffff;
      border-radius: 38rpx;
      box-shadow: 0px 12rpx 20rpx rgba(0, 0, 0, 0.05);
    }
    .left {
      box-sizing: border-box;
      // width: 334rpx;
      flex: 1;
      height: 342rpx;
      padding: 38rpx 20rpx 20rpx;
      margin-right: 20rpx;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 36rpx;
        span {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 1;
          color: var(--color1);
        }
        image {
          width: 23rpx;
          height: 23rpx;
        }
      }
      .list {
        position: relative;
        height: 228rpx;
        margin-top: 20rpx;
        background-color: #ffe;
        .swiper {
          width: 100%;
          height: 100%;
          .content {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            padding: 30rpx 20rpx;
            overflow: hidden;
            border-radius: 20rpx;
            .title {
              font-size: 27rpx;
              line-height: 32rpx;
              color: #ffffff;
            }
            .date {
              margin-top: 12rpx;
              font-size: 20rpx;
              color: #ffffff;
            }
          }
        }
        .indicator {
          position: absolute;
          right: 12rpx;
          bottom: 12rpx;
          z-index: 2;
          font-size: 23rpx;
          color: var(--color1);
          letter-spacing: 0;
          .total {
            color: var(--color4);
          }
        }
      }
    }
    .right {
      display: flex;
      flex: 1;
      flex-direction: column;
      .item {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: space-between;
        padding: 0 26rpx;
        margin-bottom: 20rpx;
        .info {
          .title {
            margin-bottom: 18rpx;
            font-size: 30rpx;
            line-height: 36rpx;
            color: var(--color1);
          }
          .tips {
            font-size: 23rpx;
            line-height: 27rpx;
            color: var(--color4);
          }
        }
        image {
          width: 69rpx;
          height: 69rpx;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .boss {
    margin-top: 58rpx;
    .title {
      padding: 0 30rpx;
      font-size: 30rpx;
      font-weight: 700;
      line-height: 36rpx;
      color: var(--color1);
    }
    .scroll {
      width: 100%;
      height: 384rpx;
      margin-top: 20rpx;
      white-space: nowrap;
      .list {
        height: 384rpx;
        padding: 0 30rpx;
        padding-bottom: 20rpx;
        .item {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 212rpx;
          height: 364rpx;
          margin-right: 28rpx;
          overflow: hidden;
          background-color: #fff;
          border-radius: 30rpx;
          box-shadow: 0px 12rpx 20rpx rgba(0, 0, 0, 0.05);
          &:last-child {
            margin-right: 0;
          }
          .img {
            width: 134rpx;
            height: 134rpx;
            background-color: var(--bgc4);
            border-radius: 50%;
          }
          .name {
            margin-top: 20rpx;
            font-size: 27rpx;
            line-height: 32rpx;
            color: var(--color1);
            word-break: keep-all;
          }
          .type {
            margin-top: 4rpx;
            font-size: 23rpx;
            color: var(--color4);
            word-break: keep-all;
          }
          .button {
            box-sizing: border-box;
            width: 146rpx;
            height: 58rpx;
            margin-top: 20rpx;
            font-size: 23rpx;
            line-height: 56rpx;
            color: var(--color1);
            text-align: center;
            border: 1px solid #c0c4cc;
            border-radius: 28rpx;
          }
        }
      }
    }
  }
}
</style>
